import React from 'react'
import { useNavigate } from 'react-router-dom'
import { Form, Input, Button, message } from 'antd'
import {
  UserOutlined,
  LockOutlined
} from '@ant-design/icons'
import style from './login.module.css'
import ParticlesComponents from '@/views/login/Particles'
import {
  getUserListApi as loginApi
} from '@/api/user'

export default function Login() {
  const navigate = useNavigate()

  // 登录
  const onFinish = (from) => {
    loginApi({
      username: from.username,
      password: from.password,
      roleState: true,
      _expand: 'role'
    }).then(res => {
      if (res.length > 0) {
        localStorage.setItem('token', JSON.stringify(res[0]))
        navigate('/home')
      } else {
        message.error('用户名或密码错误')
      }
    })
  }

  return (
    <div style={{
      background: 'rgb(56,64,130)',
      height: '100vh'
    }}>
      <ParticlesComponents />
      <div className={style.formContainer}>
        <div className={style.loginTitle}>
          全球新闻发布管理系统
        </div>
        <Form name="basic" onFinish={onFinish} >
          <Form.Item
            name="username"
            rules={[{
              required: true,
              message: '请输入用户名!'
            }]}>
            <Input placeholder="用户名" prefix={<UserOutlined/>}/>
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{
              required: true,
              message: '请输入密码!'
            }]}>
            <Input placeholder="密码" prefix={<LockOutlined/>} type="password" />
          </Form.Item>

          <Form.Item>
            <Button htmlType="submit" style={{ width: '100%' }} type="primary">登录</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
